<template>
  <div>
    <el-dialog v-model="visible" :show-close="false" width="700">
      <template #header="{ close, titleId, titleClass }">
        <div class="my-header">
          <h4 :id="titleId" :class="titleClass">
            生成链接
          </h4>
        </div>
      </template>

      <div>
        <el-form :model="formData" label-width="120px" ref="elFormRef">
          <el-form-item label="名称" prop="uname">
            <el-input v-model="formData.uname" size="large" placeholder="请输入名称" />
          </el-form-item>

          <el-form-item label="商品" prop="moneyId">
            <Select v-model="formData.moneyId" labelKey="money_name" valueKey="id" showField="money"
              :data="priceData" />
          </el-form-item>

          <el-form-item label="地址" prop="addIdId">
            <Select v-model="formData.addIdId" labelKey="address" valueKey="id" mode="api"
              apiUrl="/api/admin/getAddressAddAndEdit" />
          </el-form-item>

          <el-form-item label="订单价格" prop="orderMoney">
            <el-input-number v-model="formData.orderMoney" :min="1" @change="handleChange" />
          </el-form-item>

          <el-form-item label="购买数量" prop="goods_img">
            <el-input-number v-model="formData.number" :min="1" @change="handleChange" />
          </el-form-item>
        </el-form>
      </div>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="close">关闭</el-button>

          <el-button type="primary" @click="handleSubmit">
            保存
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script lang='ts' setup>
import { ref, reactive, watch, toRaw, onMounted, nextTick, computed } from 'vue'
import { SetUserPlaceOrderApi } from '@/api/index'
import { ElMessage } from 'element-plus'
import Select from '@/components/admin/Select.vue'
import Upload from '@/components/Upload.vue'
import { Goods } from '@element-plus/icons-vue'

const props = defineProps({
})

const visible = ref(false)

const elFormRef = ref(null)

// 表单数据
const formData = ref({
  uname: '',
  moneyId: '',
  orderMoney: '',
  goodsId: '',
  number: '',
  addIdId: '',
  shopId: '',
})

const priceData = ref([])

const open = (config) => {
  formData.value.goodsId = config.data.id

  priceData.value = config.data.prices

  formData.value.shopId = config.data.shop_id

  visible.value = true
}

const close = () => {
  visible.value = false
}

const handleSubmit = async () => {
  try {
    let data = []

    data.push(toRaw(formData.value))

    const res = await SetUserPlaceOrderApi({ message: JSON.stringify(data) })

    close()
  } catch (error) {
    ElMessage({
      type: 'error',
      message: error.msg
    })

    close()
  }
}

// 暴露方法给父组件
defineExpose({
  open
});

const emit = defineEmits(['reload'])

onMounted(() => {
  // open()
})
</script>

<style lang='scss' scoped></style>
